<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    x:{{position.x}}<br/>
    y:{{position.y}}<br/>
    <!-- <div @click="change">change</div> -->
  </div>
  <script type="module">
      import {createApp, reactive, ref, onMounted, onUnmounted } from "./node_modules/vue/dist/vue.esm-browser.js"
      function useMousePosition () {
        const position = ref({
            x:0,
            y:0
          })
          const update = e => {
            position.value.x = e.pageX;
            position.value.y = e.pageY;
            
          }
          onMounted(() => {
            window.addEventListener('mousemove', update)
          })
          onUnmounted(() => {
            window.removeEventListener('mousemove', update)
          })
          return position
      }
      const app = createApp({
        setup(props, context) {
          // console.log(props, context)
         const position = useMousePosition()
          return {
            position
          }
        },
        mounted() {
          this.position.x = 100
         
        },
      })
      console.log(app)
      app.mount("#app")
  </script>
</body>
</html>
